<html lang="ru">
<head>
  <title>Megano</title>
  <meta name="description" content="Описание страницы">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <link href="favicon.ico" rel="shortcut icon">
  <link rel="preload" href="assets/fonts/Roboto/Roboto-Regular.woff" as="font">
  <link rel="preload" href="assets/fonts/Roboto/Roboto-Italic.woff" as="font">
  <link rel="preload" href="assets/fonts/Roboto/Roboto-Bold.woff" as="font">
  <link rel="preload" href="assets/fonts/Roboto/Roboto-Bold_Italic.woff" as="font">
  <link rel="preload" href="assets/fonts/Roboto/Roboto-Light.woff" as="font">
  <link rel="preload" href="assets/fonts/Roboto/Roboto-Light_Italic.woff" as="font">
  <link rel="stylesheet" href="assets/css/fonts.css?v=34400251">
  <link rel="stylesheet" href="assets/css/basic.css?v=34400251">
  <link rel="stylesheet" href="assets/css/extra.css?v=34400251">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="assets/plg/CountDown/countdown.js"></script>
</head>
<body class="Site" id="site">
  <header class="Header">
    <div class="ControlPanel">
      <div class="wrap">
        <div class="row ControlPanel-row">
          <div class="row-block">
            <div class="row ControlPanel-rowSplit">
              <div class="row-block"><a class="ControlPanel-title" href="#">Free Delivery</a>
              </div>
              <div class="row-block hide_700"><span class="ControlPanel-title">Follow Us</span>
                <ul class="menu menu_img menu_smallImg ControlPanel-menu">
                  <li class="menu-item"><a class="menu-link" href="#"><img src="assets/img/icons/socialHeader/fb.svg" alt="fb.svg"/></a>
                  </li>
                  <li class="menu-item"><a class="menu-link" href="#"><img src="assets/img/icons/socialHeader/tw.svg" alt="tw.svg"/></a>
                  </li>
                  <li class="menu-item"><a class="menu-link" href="#"><img src="assets/img/icons/socialHeader/in.svg" alt="in.svg"/></a>
                  </li>
                  <li class="menu-item"><a class="menu-link" href="#"><img src="assets/img/icons/socialHeader/pt.svg" alt="pt.svg"/></a>
                  </li>
                  <li class="menu-item"><a class="menu-link" href="#"><img src="assets/img/icons/socialHeader/mail.svg" alt="mail.svg"/></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <nav class="row-block">
            <div class="row ControlPanel-rowSplit">
              <div class="row-block"><a class="ControlPanel-title" href="/profile">Login / Register</a>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>
    <div class="wrap">
      <div class="row Header-rowMain">
        <div class="row-block Header-logo"><a class="logo" href="/"><img class="logo-image" src="assets/img/logo.png" alt="logo.png"/></a>
        </div>
        <nav class="row-block row-block_right Header-menu">
          <div class="menuModal" id="navigate">
            <ul class="menu menu_main">
              <li class="breadcrumbs-item"><a href="/">Home</a>
              </li>

              <li class="menu-item"><a class="menu-link" href="/sale">Sale</a>
              </li>
              <li class="menu-item"><span class="menu-label menu-label_success">Hot</span><a class="menu-link" href="/product">Gallery</a>
              </li>
              </li>
            </ul>
          </div>
        </nav>
        <div class="row-block">
          <div class="CartBlock"><a class="CartBlock-block" href="/cart"><img class="CartBlock-img" src="assets/img/icons/cart.svg" alt="cart.svg"/><span class="CartBlock-amount">0</span></a>
            <div class="CartBlock-block"><span class="CartBlock-price">0.00$</span>
            </div>
          </div>
        </div>
        <div class="row-block Header-trigger"><a class="menuTrigger" href="#navigate">
            <div class="menuTrigger-content">Показать навигацию
            </div><span></span><span></span><span></span></a>
        </div>
      </div>
    </div>
    <div class="Header-searchWrap">
      <div class="wrap">
        <div class="Header-categories">
          <div class="CategoriesButton">
            <div class="CategoriesButton-title">
              <div class="CategoriesButton-icon"><img src="assets/img/icons/allDep.svg" alt="allDep.svg"/>
              </div><span class="CategoriesButton-text">All Departments</span>
              <div class="CategoriesButton-arrow">
              </div>
            </div>
            <div class="CategoriesButton-content">
              
              <!-- Получаем категории и подкатегории  -->
              <div class="CategoriesButton-link" v-for="category in categories"><a :href="`catalog/${category.id}/`">
                <div class="CategoriesButton-icon"><img :src="category.image.src" :alt="category.image.alt"/>
                </div><span class="CategoriesButton-text">{{ category.name }}</span></a>
                <a v-if="category.subcategories.length > 0" class="CategoriesButton-arrow" href="#"></a>

                <div v-if="category.subcategories.length > 0" class="CategoriesButton-submenu">
                  <div v-for="subcategory in category.subcategories">
                    <a class="CategoriesButton-link" :href="`catalog/${category.id}/`">
                    <div class="CategoriesButton-icon">
                      <img :src="subcategory.image.src" :alt="subcategory.altsubcategory.al"/>
                    </div>
                    <span class="CategoriesButton-text">{{ subcategory.title }}</span></a>
                  </div>
                </div>
              </div>
              <!-- Получаем категории и подкатегории  -->

            </div>
          </div>
        </div>
        <div class="Header-searchLink"><img src="assets/img/icons/search.svg" alt="search.svg"/>
        </div>
        <div class="Header-search">
          <div class="search">
            <form class="form form_search" action="#" method="post">
              <input class="search-input" id="query" name="query" type="text" placeholder="What are you looking for ..."/>
              <button class="search-button" type="submit" name="search" id="search"><img src="assets/img/icons/search.svg" alt="search.svg"/>Search
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="Middle Middle_top">
    <div class="Middle-top">
      <div class="wrap">
        <div class="Middle-header">
          <h1 class="Middle-title">Профиль
          </h1>
          <ul class="breadcrumbs Middle-breadcrumbs">
            <li class="breadcrumbs-item"><a href="/">Home</a>
            </li>
            <li class="breadcrumbs-item breadcrumbs-item_current"><span>Профиль</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="Section Section_column Section_columnLeft">
      <div class="wrap">
        <div class="Section-column">
          <div class="Section-columnSection">
            <header class="Section-header">
              <strong class="Section-title">Навигация
              </strong>
            </header>
            <div class="Section-columnContent">
              <div class="NavigateProfile">
                <ul class="menu menu_vt">
                  <li class="menu-item"><a class="menu-link" href="/profile">Профиль</a>
                  </li>
                  <li class="menu-item"><a class="menu-link" href="/history-order">История заказов</a>
                  </li>

                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="Section-content">
          <div class="Profile">
            <form class="form Profile-form" action="#" method="post">
              <div class="row">
                <div class="row-block">
                  <div class="form-group">
                    <label class="form-label" for="avatar">Аватар
                    </label>
                    <div class="Profile-avatar">
                      <div class="Profile-img"><img src="assets/img/content/home/card.jpg" alt="card.jpg"/>
                      </div>
                      <label class="Profile-fileLabel" for="avatar">Выберите аватар
                      </label>
                      <input class="Profile-file form-input" id="avatar" name="avatar" type="file"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="form-label" for="name">ФИО
                    </label>
                    <input class="form-input" id="name" name="name" type="text" value="Иванов Иван Иванович"/>
                  </div>
                </div>
                <div class="row-block">
                  <div class="form-group">
                    <label class="form-label" for="phone">Телефон
                    </label>
                    <input class="form-input" id="phone" name="phone" type="text" value="+70000000000"/>
                  </div>
                  <div class="form-group">
                    <label class="form-label" for="mail">E-mail
                    </label>
                    <input class="form-input" id="mail" name="mail" type="text" value="send@test.test"/>
                  </div>
                  <div class="form-group">
                    <label class="form-label" for="password">Пароль
                    </label>
                    <input class="form-input" id="password" name="password" type="password" placeholder="Тут можно изменить пароль"/>
                  </div>
                  <div class="form-group">
                    <label class="form-label" for="passwordReply">Подтверждение пароля
                    </label>
                    <input class="form-input" id="passwordReply" name="passwordReply" type="password" placeholder="Введите пароль повторно"/>
                  </div>
                  <div class="form-group">
                    <div class="Profile-btn">
                      <button class="btn btn_success">Сохранить
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer class="Footer">
    <div class="wrap">
      <div class="row Footer-main">
        <div class="row-block"><a class="logo Footer-logo" href="/"><img class="logo-image" src="assets/img/logo_footer.png" alt="logo_footer.png"/></a>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid  unt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
          </p>
          <ul class="menu menu_img menu_smallImg Footer-menuSoc">
            <li class="menu-item"><a class="menu-link" href="#"><img src="assets/img/icons/socialFooter/fb.svg" alt="fb.svg"/></a>
            </li>
            <li class="menu-item"><a class="menu-link" href="#"><img src="assets/img/icons/socialFooter/tw.svg" alt="tw.svg"/></a>
            </li>
            <li class="menu-item"><a class="menu-link" href="#"><img src="assets/img/icons/socialFooter/in.svg" alt="in.svg"/></a>
            </li>
            <li class="menu-item"><a class="menu-link" href="#"><img src="assets/img/icons/socialFooter/pt.svg" alt="pt.svg"/></a>
            </li>
            <li class="menu-item"><a class="menu-link" href="#"><img src="assets/img/icons/socialFooter/mail.svg" alt="mail.svg"/></a>
            </li>
          </ul>
        </div>
        <div class="row-block">
          <strong class="Footer-title">Useful Links
          </strong>
          <ul class="menu menu_vt Footer-menu">
            <li class="menu-item"><a class="menu-link" href="#">Checkout</a>
            </li>
            <li class="menu-item"><a class="menu-link" href="#">My Cart</a>
            </li>
            <li class="menu-item"><a class="menu-link" href="#">Delivery</a>
            </li>
            <li class="menu-item"><a class="menu-link" href="#">Order Info</a>
            </li>
            <li class="menu-item"><a class="menu-link" href="#">Terms</a>
            </li>
            <li class="menu-item"><a class="menu-link" href="#">Conditions</a>
            </li>
          </ul>
        </div>
        <div class="row-block">
          <strong class="Footer-title">My Account
          </strong>
          <ul class="menu menu_vt Footer-menu">
            <li class="menu-item"><a class="menu-link" href="#">Accessories</a>
            </li>
            <li class="menu-item"><a class="menu-link" href="#">Bags</a>
            </li>
            <li class="menu-item"><a class="menu-link" href="#">Cameras</a>
            </li>
            <li class="menu-item"><a class="menu-link" href="#">Clothings</a>
            </li>
            <li class="menu-item"><a class="menu-link" href="#">Electronics</a>
            </li>
            <li class="menu-item"><a class="menu-link" href="#">Fashion</a>
            </li>
          </ul>
        </div>
        <div class="row-block">
          <strong class="Footer-title">Contacts
          </strong>
          <p>Phone: 8.800.200.600<br>Email: Support@ninzio.com<br>Skype: techno<br>Address: New York, north<br>Avenue 26/7<br>0057
          </p>
        </div>
      </div>
    </div>
    <div class="Footer-copy">
      <div class="wrap">
        <div class="row row_space">
          <div class="row-block">© Copyright&#32;<a href="#">Megano Store.</a>&#32;All rights reserved.
          </div>
          <div class="row-block"><span>Accepted Payments</span>
            <div class="Footer-payments">
              <div><img src="assets/img/payments/visa.png" alt="visa.png"/>
              </div>
              <div><img src="assets/img/payments/mastercard.png" alt="mastercard.png"/>
              </div>
              <div><img src="assets/img/payments/paypal.png" alt="paypal.png"/>
              </div>
              <div><img src="assets/img/payments/american.png" alt="american.png"/>
              </div>
              <div><img src="assets/img/payments/electron.png" alt="electron.png"/>
              </div>
              <div><img src="assets/img/payments/maestro.png" alt="maestro.png"/>
              </div>
              <div><img src="assets/img/payments/delta.png" alt="delta.png"/>
              </div>
              <div><img src="assets/img/payments/e.png" alt="e.png"/>
              </div>
              <div><img src="assets/img/payments/dk.png" alt="dk.png"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
  
  <script src="assets/js/app.js"></script>
  <script src="assets/plg/jQuery/jquery-3.5.0.slim.min.js"></script>
  <script src="assets/plg/form/jquery.form.js"></script>
  <script src="assets/plg/form/jquery.maskedinput.min.js"></script>
  <script src="assets/plg/range/ion.rangeSlider.min.js"></script>
  <script src="assets/plg/Slider/slick.min.js"></script>
  <script src="assets/js/scripts.js"></script>
</body></html>